<%--
  Created by IntelliJ IDEA.
  User: admin
  Date: 2021/1/5
  Time: 3:36 下午
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>登录入口</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="/mvc/plugins/bootstrap/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="/mvc/css/common/nav.css">
    <style>
        #login_div{
            /*border:1px solid red;*/

            /*设置外边距*/
            margin-top: 100px;

            /*设置内边距*/
            padding: 20px;

            /*设置边框的阴影部分*/
            box-shadow: 2px 2px 4px #000;

            /*设置边框的圆角*/
            border-radius: 20px;
        }
    </style>
</head>
<body>
    <%--    引入导航--%>
    <%@include file="../common/nav.jsp"%>

<%--    登录表单开始--%>
    <div class="container" id="login_div">
        <div class="row">
            <form class="form-horizontal" role="form">
                <fieldset>
                    <legend>用户登录入口</legend>
                    <div class="form-group has-feedback">
                        <label for="email" class="col-sm-2 control-label">邮箱</label>
                        <div class="col-md-8">
                            <input type="text" class="form-control" id="email" placeholder="请输入邮箱">
                            <span class="glyphicon glyphicon-user form-control-feedback"></span>
                            <span class="text-danger" id="error_email" style="display: none">sorry,邮箱不存在!</span>
                        </div>
                    </div>
                    <div class="form-group has-feedback">
                        <label for="lastname" class="col-sm-2 control-label">验证码</label>
                        <div class="col-md-8">
                            <input type="text" class="form-control" id="lastname" placeholder="请输入验证码">
                            <span class="glyphicon glyphicon-lock form-control-feedback"></span>
                        </div>
                        <div class="col-md-2">
                           <button type="button" class="btn btn-success" onclick="send_msg()">发送验证码</button>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10">
                            <div class="checkbox">
                                <label>
                                    <input type="checkbox" id="test">请记住邮箱
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10">
<%--                            普通按钮--%>
                            <button type="button" onclick="login()" class="btn btn-default">登录</button>
                        </div>
                    </div>
                </fieldset>
            </form>
        </div>
    </div>

    <%--    必须先引入jquery.min.js--%>
    <script src="/mvc/plugins/jquery/jquery.min.js"></script>
    <script src="/mvc/plugins/bootstrap/js/bootstrap.js"></script>

    <script>

       $(function(){
           //当整个页面中的所有的dom元素[标签]全部加载完毕之后,自动执行

           //先从本地存储中获取key=email的对应的value
           let email = localStorage.getItem("email");

           //获取email对应的input标签
           let email_input = document.getElementById("email");

           //将本地存储保存的数据放入到email_input文本框中
           email_input.value = email;
       });


       //封装好记住邮箱的功能
       function ck_email(){
           //根据控件的id属性的名称来获取这个控件的对象
           let ck = document.getElementById("test");

           //判断是否记住了邮箱
           if(ck.checked){//选中了...
               //获取email所在的input的对象
               let email_input = document.getElementById("email");
               //获取email控件的值
               let email = email_input.value;
               //将邮箱进行本地存储 - h5本地存储技术
               //以key-value的形式进行存储的,并且key是唯一的
               localStorage.setItem("email",email);
           }else{
               //清除key
               localStorage.removeItem("email");
           }
       }

        function login(){
           //记住邮箱
            ck_email();
        }


        //发送验证码按钮触发的单击事件
        function send_msg(){
           let spans = document.getElementById("error_email");
           spans.style.display="none";

           let emails = document.getElementById("email").value;

           //通过ajax方式将emails发送到后台
            $.post("/mvc/user/sendCode",{email:emails},function(result){
                //result就是json对象
                //json对象.key可以得到它对应的value
                //console.log(result.code);
                if(result.code==200){
                    alert(result.msg);
                }else{
                    //显示错误信息
                    //先获取错误提示的span对象
                    let span = document.getElementById("error_email");
                    span.style.display="";
                }
            })
        }
    </script>
</body>
</html>
